/* eslint-disable import/no-unresolved */
import React, { PureComponent } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import router from 'umi/router';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Card,
  Button,
  Anchor,
  message,
  Row,
  Col,
  Input,
  Checkbox,
  Radio,
  Modal,
  Spin,
  Empty,
} from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';
import downloadFile, { getFileName } from '@/utils/utils';
import ProModal from '@/pages/components/Problem/ProblemPage/ProModal';
import HdlRemark from '@/pages/components/HdlRemark';
import ContactPage from '../../AccuFundService/AccuServiceHandle/ContactPage';
import AddMatInfor from '../../SocialService/SocialCard/AddMatInfor';
import ContactPhone from './ContactPhone';
import EntryInform from './EntryInform';
import SocialInform from './SocialInform';
import ChargeInform from './ChargeInform';
import UpdateBase from './UpdateBase';
import UpdateChare from './UpdateChare';

const RadioGroup = Radio.Group;
const { TextArea } = Input;
const { Link } = Anchor;
const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 10,
    },
  },
  wrapperCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 10,
    },
  },
};

const formItemLayout1 = {
  labelCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 1,
    },
  },
  wrapperCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 10,
    },
  },
};
const formItemLayout2 = {
  labelCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 6,
    },
  },
  wrapperCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 18,
    },
  },
};

@connect(
  ({
    career: {
      careerMatInfor,
      dictCode,
      pdDictList,
      assDictList,
      chrgFlagDictList,
      joinTypeDictList,
      serId,
      // insAssDictList,
      // accuAssDictList,
      // insJoinTypeDictList,
      // accuJoinTypeDictList,
      currentSelectedRows,
      currentSelectedRowKeys,
    },
    loading,
  }) => ({
    careerMatInfor,
    dictCode,
    pdDictList,
    assDictList,
    chrgFlagDictList,
    joinTypeDictList,
    serId,
    // loading: loading.effects['career/getCareerMat'],
    addPayLoading: loading.effects['career/addPayInfor'],
    contactPhoneLoading: loading.effects['career/contactAddColle'],
    loading: loading.effects['career/getCareerMat'],
    saveLoading: loading.effects['career/add'] || loading.effects['career/update'],
    currentSelectedRows,
    currentSelectedRowKeys,
  })
)
@Form.create()
class DetailInfor extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      execVisable: false,
      btnDis: false,
      baseVisible: false,
      chareVisible: false,
      payDetailVisible: false,
      proVisible: false,
    };
  }

  componentDidMount() {
    const { dispatch, location } = this.props;
    const { entryId } = location.query;
    this.setState({
      entryId: location.query.entryId,
      tabKey: location.query.activeKey,
      execState: location.query.execState,
    });
    this.getAreaList(null, data => {
      data.forEach(item => {
        const newItem = item;
        newItem.label = item.areaName;
        newItem.value = item.areaId;
        newItem.isLeaf = false;
      });
      this.setState({
        provCityAreaList: data,
      });
      dispatch({
        type: 'career/getCareerMat',
        payload: { entryId, data },
        callback: res => {
          if (res.success) {
            const maGpages =
              res.data.matPkgVo && res.data.matPkgVo.maGpages ? res.data.matPkgVo.maGpages : [];
            if (maGpages.length) {
              maGpages.forEach(item => {
                if (item.maGpDetails && item.maGpDetails.length) {
                  item.maGpDetails.forEach(d => {
                    if (+d.inpType === 11) {
                      const areaIdArr = d.inpVal && d.inpVal.split(',');
                      this.getProvCityAreaList(areaIdArr, () => {
                        dispatch({
                          type: 'career/getCareerMatInfor',
                          payload: { resData: res.data },
                        });
                      });
                    }
                    if (d.children) {
                      d.children.forEach(c => {
                        if (+c.inpType === 11) {
                          const areaIdArr = c.inpVal && c.inpVal.split(',');
                          this.getProvCityAreaList(areaIdArr, () => {
                            dispatch({
                              type: 'career/getCareerMatInfor',
                              payload: { resData: res.data },
                            });
                          });
                        }
                      });
                    }
                    dispatch({
                      type: 'career/getCareerMatInfor',
                      payload: { resData: res.data },
                    });
                  });
                } else {
                  dispatch({
                    type: 'career/getCareerMatInfor',
                    payload: { resData: res.data },
                  });
                }
              });
            } else {
              dispatch({
                type: 'career/getCareerMatInfor',
                payload: { resData: res.data },
              });
            }
            this.setState({
              btnDis: false,
            });
          } else {
            this.setState({
              btnDis: true,
            });
          }
        },
      });
    });
    dispatch({
      type: 'career/getDictCode',
      payload: { dictCode: 'ADD_JOIN_TYPE' },
    });
    dispatch({
      type: 'career/updateData',
      payload: { serId: entryId },
    });
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    const opermars = {
      data: {
        list: [],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 10,
        },
      },
      detail: {
        basicDto: {},
        chargeDto: {},
        consultRcrds: [],
        entryContRcrds: [],
        matSubmitInfos: [],
        ordHdlRemarks: [],
        sendDto: {},
        serDto: {},
        mkupPayDets: [],
      },
      careerMatInfor: {
        basicDto: {},
        chargeDto: {},
        consultRcrds: [],
        entryContRcrds: [],
        matSubmitInfos: [],
        mkupPayDets: [],
        ordHdlRemarks: [],
        sendDto: {},
        serDto: {},
        editingKey: '',
        elementArr: [],
        oldAssArr: [],
        matPkgVo: {},
      },
      pdArrList: [],
      matPay: {},
      dictCode: [],
      proObjData: [],
      proVisible: false, // 标记问题人员弹框显隐
      index: 0,
      subObj: {},
      joinIdeId: null,
    };
    dispatch({
      type: 'career/updateData',
      payload: opermars,
    });
  }

  // 查询省市区
  getAreaList = (areaId, callback) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'custedit/getAreaList',
      payload: {
        parentId: areaId,
        busiFlag: 2,
      },
    }).then(res => {
      callback(res.data);
    });
  };

  // 获取省市区回显
  getProvCityAreaList = (areaIdList, callback) => {
    const { provCityAreaList } = this.state;
    const cityData = [];
    const countyData = [];
    switch (areaIdList.length) {
      case 1:
        if (callback) callback();
        break;
      case 2:
        this.getAreaList(areaIdList[0], data => {
          data.forEach(area => {
            cityData.push({
              label: area.areaName,
              value: area.areaId,
              isLeaf: area.areaNature === 6,
            });
          });
          provCityAreaList.forEach(p => {
            const newP = p;
            if (p.areaId === areaIdList[0]) {
              newP.children = cityData;
            }
          });
          if (callback) {
            callback();
          }
          this.setState({ provCityAreaList }, () => {
            if (callback) callback();
          });
        });
        break;
      case 3:
        // 获取市
        this.getAreaList(areaIdList[0], data => {
          data.forEach(area => {
            cityData.push({
              label: area.areaName,
              value: area.areaId,
              isLeaf: area.areaNature === 6,
            });
          });
          provCityAreaList.forEach(p => {
            const newP = p;
            if (p.areaId === areaIdList[0]) {
              newP.children = cityData;
            }
          });
          // 获取区县
          this.getAreaList(areaIdList[1], datas => {
            datas.forEach(area => {
              countyData.push({
                label: area.areaName,
                value: area.areaId,
                isLeaf: area.areaNature === 6,
              });
            });
            provCityAreaList.forEach(p => {
              if (p.areaId === areaIdList[0]) {
                // 判断省
                p.children.forEach(c => {
                  const newC = c;
                  if (c.value === areaIdList[1]) {
                    // 判读市
                    newC.children = countyData;
                  }
                });
              }
            });
            this.setState({ provCityAreaList }, () => {
              if (callback) callback();
            });
          });
        });
        break;
      default:
        break;
    }
  };

  close = () => {
    // const { tabKey } = this.state;
    router.goBack();
    // router.push(`/careermanage/career/index?activeKey=${tabKey}`);
  };

  // 保存
  insert = opermars => {
    const { tabKey } = this.state;
    const { dispatch, form, location } = this.props;
    const { pathname } = location;
    form.validateFieldsAndScroll({ focus: true }, (err, values) => {
      if (!err) {
        dispatch({
          type: 'career/inOpermars',
          payload: values,
        });
        if (opermars === 'insert') {
          if (pathname.split('/')[3] === 'collectMaterial') {
            dispatch({
              type: 'career/add',
              callback: response => {
                if (response.success) {
                  if (response.data && response.data.msg) {
                    message.warning(response.data.msg);
                  }
                  router.push(`/careermanage/career/index?activeKey=${tabKey}`);
                } else {
                  message.warning(response.message || '服务端错误');
                }
              },
            });
          } else if (pathname.split('/')[3] === 'updatematerial') {
            dispatch({
              type: 'career/update',
              callback: response => {
                if (response.success) {
                  if (response.data && response.data.msg) {
                    message.warning(response.data.msg);
                  }
                  router.push(`/careermanage/career/index?activeKey=${tabKey}`);
                } else {
                  message.warning(response.message || '服务端错误');
                }
              },
            });
          }
        } else if (opermars === 'update') {
          if (Number(values.matFlag) === 2) {
            this.setState({
              execVisable: true,
            });
          } else {
            this.execOkFunc();
          }
        }
      }
    });
  };

  // 提交运行
  execOkFunc = () => {
    const { dispatch } = this.props;
    const { tabKey } = this.state;
    dispatch({
      type: 'career/updateSub',
      payload: { asss: [] },
      callback: response => {
        if (response.success) {
          if (response.data && response.data.msg) {
            message.warning(response.data.msg);
          }
          router.push(`/careermanage/career/index?activeKey=${tabKey}`);
        } else {
          message.warning(response.message || '服务端错误');
        }
      },
    });
  };

  // 提交运行 确定
  execOk = () => {
    const { dispatch, form } = this.props;
    const { tabKey } = this.state;
    form.validateFields(['pdArrAccu', 'pdArrSocial'], (err, fieldsValue) => {
      if (err) return;
      const pdAttr = [];
      const socialArr = fieldsValue.pdArrSocial;
      const accuArr = fieldsValue.pdArrAccu;
      if (socialArr) {
        Object.keys(socialArr).forEach(key => {
          pdAttr.push(`${socialArr[key]}`);
        });
      }
      if (accuArr) {
        Object.keys(accuArr).forEach(key => {
          pdAttr.push(`${accuArr[key]}`);
        });
      }
      dispatch({
        type: 'career/updateSub',
        payload: { asss: pdAttr },
        callback: response => {
          if (response.success) {
            if (response.data && response.data.msg) {
              message.warning(response.data.msg);
            }
            this.setState({
              execVisable: false,
            });
            router.push(`/careermanage/career/index?activeKey=${tabKey}`);
          } else {
            message.warning(response.message || '服务端错误');
          }
        },
      });
    });
  };

  // 提交运行 取消
  execCancel = () => {
    this.setState({
      execVisable: false,
    });
  };

  // 选择材料
  onSelectData = element => {
    const { dispatch, careerMatInfor } = this.props;
    const { elementArr } = careerMatInfor;
    // careerMatInfor.mkupPayDets.forEach(item => {
    // this.onMkupPayPlcy(item.mkupPayId || item.id);
    // });
    if (+element.inpType !== 11) {
      dispatch({
        type: 'career/matInfor',
        payload: { elementArr, element },
      });
      if (+element.inpType === 9 && Number(element.down) === 1) {
        if (element.downfile.response) {
          if (element.downfile.response.success) {
            this.downLoad(element.downfile.response.data);
          }
        } else {
          this.downLoad(element.downfile.uid.concat('|').concat(element.downfile.name));
        }
      }
    }
  };

  // 选择地区
  loadAreaData = element => {
    const { provCityAreaList } = this.state;
    if (+element.inpType === 11) {
      const newElement = element;
      const childrenData = [];
      if (newElement.targetOption) {
        newElement.targetOption.loading = true;
        this.getAreaList(newElement.parentId, data => {
          data.forEach(item => {
            const newItem = item;
            newItem.isLeaf = item.areaNature === 6;
            newItem.label = item.areaName;
            newItem.value = item.areaId;
            childrenData.push(item);
          });
        });
      }
      setTimeout(() => {
        newElement.targetOption.loading = false;
        newElement.targetOption.children = childrenData;
        this.setState({
          provCityAreaList: [...provCityAreaList],
        });
      }, 1000);
    }
  };

  // 电话联系
  submitData = operms => {
    const { entryId } = this.state;
    const values = {
      consultRcrd: {
        replyContent: operms.replyContent,
        state: operms.state,
        content: operms.content,
      },
      contactContent: operms.contactContent,
      againFlag: operms.againFlag,
      againTime: operms.againTime ? operms.againTime.format('YYYY-MM-DD') : null,
      consultRcrdFlag: operms.consultRcrdFlag,
      entryId,
    };
    this.contactport(values);
  };

  // 联系接口
  contactport = obj => {
    const { dispatch } = this.props;
    dispatch({
      type: 'career/contactAddColle',
      payload: obj,
      callback: response => {
        if (response) {
          this.setState({
            conatctVisible: false,
          });
        }
      },
    });
  };

  // 联系弹窗
  addContact = () => {
    this.handleModalVisible(true);
    this.setState({
      expandConsult: false,
      contactFlag: false,
    });
  };

  // 模态框显隐
  handleModalVisible = flag => {
    this.setState({
      conatctVisible: !!flag,
    });
  };

  // 联系记录 取消
  conatctCancel = () => {
    this.setState({
      conatctVisible: false,
    });
  };

  // 联系记录数据
  contactData = value => {
    this.setState({ contactFlag: value });
  };

  // 联系记录弹窗
  addConsultData = expandConsult => {
    this.setState({
      expandConsult,
    });
  };

  // 修改基本信息
  updateInfo = () => {
    this.handleModalBaseVisible(true);
  };

  // 修改基本信息弹窗
  handleModalBaseVisible = flag => {
    this.setState({
      baseVisible: !!flag,
    });
  };

  payDetail = flag => {
    console.log('父被调用了', flag);
    this.handlePayDetailMoadle(flag);
  };

  handlePayDetailMoadle = flag => {
    this.setState({
      payDetailVisible: !!flag,
    });
  };

  // 提交数据
  submitBaseData = value => {
    const { dispatch, careerMatInfor } = this.props;
    const { entryId } = this.state;
    const opermars = {
      ...value,
      entryId,
      vno: careerMatInfor.basicDto.vno,
    };
    dispatch({
      type: 'career/updateBase',
      payload: opermars,
      callback: response => {
        if (response) {
          this.setState({
            baseVisible: false,
          });
        }
      },
    });
  };

  // 修改收费信息
  updateChare = () => {
    this.handleModalChareVisible(true);
  };

  // 修改收费信息 弹窗
  handleModalChareVisible = flag => {
    this.setState({
      chareVisible: !!flag,
    });
  };

  // 提交数据
  submitChareData = value => {
    const { dispatch, careerMatInfor } = this.props;
    const { chargeDto, sendId, taskId } = careerMatInfor;
    const { pdChargeDtos, insMergFlag } = chargeDto;
    const { entryId } = this.state;
    const entryDets = [];
    pdChargeDtos.map(item => {
      const obj = {};
      if (insMergFlag === 1) {
        if (Number(item.ass) === 1 || Number(item.ass) === 2) {
          obj.beginDate = item.sendBeginDate ? String(moment(item.sendBeginDate).valueOf()) : null;
          obj.ass = item.ass;
          obj.pdCate = item.pdCate;
          return entryDets.push(obj);
        }
      } else if (Number(item.ass) !== 1) {
        obj.beginDate = item.sendBeginDate ? String(moment(item.sendBeginDate).valueOf()) : null;
        obj.ass = item.ass;
        obj.pdCate = item.pdCate;
        return entryDets.push(obj);
      }
      return true;
    });
    this.setState({ subLoading: true });
    dispatch({
      type: 'career/updateChare',
      payload: { ...value, entryDets, sendId, entryId, taskId },
      callback: response => {
        this.setState({
          subLoading: false,
        });
        if (response.success) {
          this.setState({
            chareVisible: false,
          });
        }
      },
    });
  };

  // 选择补缴
  onDataChange = value => {
    const { dispatch } = this.props;
    dispatch({
      type: 'career/dateChange',
      payload: value,
    });
  };

  // element 校验
  checkElement = (rule, value, callback) => {
    let tip = '';
    switch (Number(value.inpType)) {
      case 1:
        tip = `请输入不超过30个字的${value.matName}`;
        break;
      case 9:
        tip = `请上传${value.matName}`;
        break;
      case 3:
        tip = `请输入不超过300个字的${value.matName}`;
        break;
      case 11:
        tip = `请选择(市区或县级)`;
        break;
      default:
        tip = `请选择${value.matName}`;
        break;
    }
    // 非上传，非级联，必填时检验是否填值；
    // 非上传，级联时候，无论是否必填必须选到县
    if (
      Number(value.inpType) !== 9
        ? (rule.required && !value.inpVal && !value.areaValue) ||
          (value.areaValue && value.areaValue.length && value.areaValue.length < 2)
        : rule.required && !(value.fileList && value.fileList.length)
    ) {
      callback(tip);
    } else if (Number(value.inpType) === 1 || Number(value.inpType) === 3) {
      if (rule.max < (value.inpVal && value.inpVal.length)) {
        callback(tip);
      } else {
        callback();
      }
    } else if (
      Number(value.inpType) === 11 &&
      (!rule.required &&
        (value.areaValue && value.areaValue.length < 2 && value.areaValue.length > 0))
    ) {
      callback('请选择(市区或县级)');
    } else if (
      Number(value.inpType) === 11 &&
      (rule.required && (value.areaValue && value.areaValue.length < 2))
    ) {
      callback('请选择(市区或县级)');
    } else {
      callback();
    }
  };

  // 材料是否完整
  matFlagOnChange = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'career/matFlagChange',
      payload: e.target.value,
    });
  };

  //  选择补缴
  onMkupPayPlcy = index => {
    const { dispatch, form, careerMatInfor } = this.props;
    const getFieldsList = form.getFieldsValue();
    const { hshdRegFlag } = careerMatInfor.serDto.entryInsDetDto;
    let joinIdeId = null;
    Object.entries(getFieldsList).forEach(([key]) => {
      if (key.split('_')[0] === 'mat') {
        if (getFieldsList[key].relBusiType && getFieldsList[key].relBusiType === '3') {
          joinIdeId = getFieldsList[key].inpVal;
        }
      }
    });
    form.validateFieldsAndScroll(
      [
        `mkupPayDets[${index}][mkupPayBase]`,
        `mkupPayDets[${index}][beginDate]`,
        `mkupPayDets[${index}][ass]`,
        `mkupPayDets[${index}][mkupPayPlcy]`,
        `mkupPayDets[${index}][endDate]`,
        `mkupPayDets[${index}][serPrice]`,
        `mkupPayDets[${index}][comProp]`,
        `mkupPayDets[${index}][perProp]`,
      ],
      (err, fieldsValue) => {
        if (err) return;
        const opermars = {
          mkupPayBase: fieldsValue.mkupPayDets[index].mkupPayBase,
          beginDate: `${moment(
            fieldsValue.mkupPayDets[index].beginDate.format('YYYY-MM')
          ).valueOf()}`,
          ass: fieldsValue.mkupPayDets[index].ass,
          endDate: `${moment(fieldsValue.mkupPayDets[index].endDate).valueOf()}`,
          joinIdeId,
          serPrice: fieldsValue.mkupPayDets[index].serPrice,
          mkupPayPlcy: fieldsValue.mkupPayDets[index].mkupPayPlcy,
          comProp: fieldsValue.mkupPayDets[index].comProp,
          perProp: fieldsValue.mkupPayDets[index].perProp,
          hshdRegFlag,
        };
        dispatch({
          type: 'career/assCount',
          payload: { opermars, index },
          callback: response => {
            const payData = response.data;
            Object.keys(payData).forEach(key => {
              form.setFieldsValue({
                [`mkupPayDets[${index}][${key}]`]: payData[key],
              });
            });
          },
        });
      }
    );
  };

  // 下载
  downLoad = item => {
    const file = item.split('|');
    downloadFile({ fileId: file[0], fileName: getFileName(file[1]) });
  };

  addLink = matinfo =>
    matinfo.split(',').map(item => {
      const matinfoItem = item.split('|')[1];
      const matinfoName = getFileName(matinfoItem);
      return (
        <p key={item.split('|')[0]}>
          <a onClick={() => this.downLoad(item)}>{matinfoName}</a>
        </p>
      );
    });

  getVal = value => {
    if (value.inpVal) {
      if (value.inpVal !== '[]') {
        return this.addLink(value.inpVal);
      }
      if (value.inpVal === '[]') {
        return '--';
      }
    }
    return true;
  };

  // 标记问题人员
  markProb = () => {
    // const { careerMatInfor, dispatch } = this.props;
    // const rows = [{ empName: careerMatInfor.sendDto.creName }];
    // const keys = [careerMatInfor.taskId];
    // dispatch({
    //   type: 'career/updateModelData',
    //   payload: {
    //     rows,
    //     keys,
    //   },
    // });
    // this.setState({ proVisible: true });

    const { currentSelectedRows: selectedRows } = this.props;
    // 判断是多选还是单选
    const temArr = [];
    let insMergFlags = 1;
    if (selectedRows[0].entryDetails.length) {
      insMergFlags = selectedRows[0].insMergFlag;
      selectedRows[0].entryDetails.forEach(item => {
        temArr.push({
          ass: item.ass,
          execState: item.execState,
          probFlag: item.probFlag,
          insMergFlag: item.insMergFlag,
          assName: item.assName,
        });
      });
    }
    let problemAll = true;
    let markFailsFlag = true;
    let execAll = true;
    const tipsObj = { tips: [], probTips: [], execTips: [] };
    temArr.forEach(item => {
      if (Number(item.probFlag) === 2) {
        problemAll = false;
      }
      if (Number(item.execState) === 1) {
        execAll = false;
      }
      if (Number(item.execState) === 1 && Number(item.probFlag) === 2) {
        markFailsFlag = false;
      }
    });
    if (problemAll || execAll) {
      if (Number(insMergFlags) === 1) {
        tipsObj.tips.push('社保');
      }
      temArr.forEach(item => {
        if (Number(item.insMergFlag) !== 1) {
          tipsObj.tips.push(item.assName);
        }
      });
    } else {
      if (Number(insMergFlags) === 1) {
        if (
          temArr.filter(item => Number(item.ass) !== 2)[0] &&
          temArr.filter(item => Number(item.ass) !== 2)[0].probFlag === 1
        ) {
          tipsObj.probTips.push('社保');
        } else {
          tipsObj.execTips.push('社保');
        }
      }
      temArr.forEach(item => {
        if (Number(item.probFlag) === 1 && Number(item.insMergFlag) !== 1) {
          tipsObj.probTips.push(item.assName);
        }
        if (Number(item.execState) !== 1 && Number(item.insMergFlag) !== 1) {
          tipsObj.execTips.push(item.assName);
        }
      });
    }
    if (problemAll) {
      const problemTxt = `${selectedRows[0].empName}员工${tipsObj.tips.join(
        ','
      )}已标记问题人员，不可重复标记，请在问题人员列表查看并处理`;
      this.proModalTxt(problemTxt, 'error', '标记失败');
      return true;
    }
    if (execAll) {
      const problemTxt = `${selectedRows[0].empName}员工${tipsObj.tips.join(
        ','
      )}已交接，不可标记问题人员，请联系社保公积金中心服务人员处理`;
      this.proModalTxt(problemTxt, 'error', '标记失败');
      return true;
    }
    this.state.proStatus = temArr;
    if (markFailsFlag) {
      const problemTxt = `${selectedRows[0].empName}员工${tipsObj.execTips.join(
        ','
      )}已交接，不可标记问题人员, ${tipsObj.probTips.join(
        ','
      )}已标记问题人员，不可重复标记，请联系社保公积金中心服务人员处理或在问题人员列表查询处理`;
      this.proModalTxt(problemTxt, 'error', '标记失败');
    } else {
      // this.getProData();
      this.toggleProModal(true);
    }
    return true;
  };

  // 问题人员弹窗统一处理
  proModalTxt = (problemAllTxt, modalType, tit) => {
    Modal[modalType]({
      title: tit,
      content: problemAllTxt,
      okText: '关闭',
      okType: 'default',
      autoFocusButton: 'cancel',
    });
  };

  // 切换标记问题人员modal的显隐
  toggleProModal = flag => {
    this.setState({ proVisible: flag });
  };

  render() {
    const {
      form: { getFieldDecorator },
      loading,
      saveLoading,
      careerMatInfor,
      contactPhoneLoading,
      currentSelectedRows,
      currentSelectedRowKeys,
    } = this.props;
    const {
      contactFlag,
      expandConsult,
      conatctVisible,
      execVisable,
      mkupPayVisible,
      btnDis,
      execState,
      baseVisible,
      chareVisible,
      provCityAreaList,
      subLoading,
      payDetailVisible,
      proVisible,
    } = this.state;
    const {
      chargeDto,
      entryContRcrds,
      elementArr,
      matFullFlag,
      ordHdlRemarks,
      pdChargeData,
      matPkgVo,
    } = careerMatInfor;
    // 表格里的办理状态社保公积金显示
    const hdlCompleteChild = item => {
      if (Number(item.submitExecFlag) === 1) {
        return (
          <Col span={8} key={item.ass}>
            <Checkbox disabled defaultValue={item.ass}>
              {item.assName}
            </Checkbox>
          </Col>
        );
      }
      if (Number(item.probFlag) === 1) {
        return (
          <Col span={8} key={item.ass}>
            <ExclamationCircleOutlined style={{ fontSize: 16, color: '#f00', marginRight: 5 }} />
            {item.assName}
          </Col>
        );
      }
      if (Number(item.submitExecFlag) === 2 && Number(item.probFlag) !== 1) {
        return (
          <Col span={8} key={item.ass}>
            <Checkbox value={item.ass}>{item.assName}</Checkbox>
          </Col>
        );
      }
      return null;
    };
    // 表格里的办理状态信息
    const hdlCompleteDom = () => {
      if (careerMatInfor.pdArrList && Number(careerMatInfor.pdArrList.insMergFlag) === 1) {
        return (
          <Col>
            {Number(
              careerMatInfor.pdArrList.probFlag && Number(careerMatInfor.pdArrList.probFlag) === 1
            ) ? (
              <Col span={8}>
                <ExclamationCircleOutlined
                  style={{ fontSize: 16, color: '#f00', marginRight: 5 }}
                />
                社保
              </Col>
            ) : (
              <Col span={8}>
                <Checkbox
                  value="3"
                  disabled={Number(careerMatInfor.pdArrList.submitExecFlag) === 1}
                >
                  社保
                </Checkbox>
              </Col>
            )}
          </Col>
        );
      }
      if (careerMatInfor.pdArrList.socialArr && careerMatInfor.pdArrList.socialArr.length) {
        return careerMatInfor.pdArrList.socialArr.map(item => hdlCompleteChild(item));
      }
      return true;
    };
    const max = element => {
      if (Number(element.inpType) === 1) {
        return 30;
      }
      if (Number(element.inpType) === 3) {
        return 300;
      }
      return null;
    };

    const matLogicalProcessing = element => {
      if (element.openFlag === 1) {
        if (Number(element.inpType) === 9 && element.fileList && element.fileList.length) {
          // eslint-disable-next-line array-callback-return
          element.fileList.map((item, index) => {
            // eslint-disable-next-line no-param-reassign
            element.fileList[index].url = `${'/csApi/fileServer/downloadFile'}?fileId=${
              item.uid
            }&fileName=${item.name}`;
            // eslint-disable-next-line no-param-reassign
            element.fileList[index].linkProps = { download: `${item.name}` };
          });
        }
        return getFieldDecorator(`mat_${element.pageDetailId}`, {
          rules: [
            {
              required: Number(matFullFlag) === 2 ? false : Number(element.reqFlag) === 1,
              validator: this.checkElement,
              max: max(element),
            },
          ],
          initialValue: element,
        })(<AddMatInfor onChange={this.onSelectData} loadData={this.loadAreaData} />);
      }
      if (Number(element.inpType) !== 9) {
        return <span>{element.name || element.inpVal || '--'}</span>;
      }
      return <a>{this.getVal(element)}</a>;
    };
    // 材料
    const renderElem = elementArrs =>
      elementArrs && elementArrs.length ? (
        elementArrs.map(element => {
          const temp = element;
          if (+element.inpType === 11) {
            temp.provCityAreaMatList = provCityAreaList;
          }
          return (
            <Row key={element.matId}>
              <Col span={10}>
                <FormItem {...formItemLayout} label={<span> {element.matName}</span>}>
                  {matLogicalProcessing(element)}
                </FormItem>
              </Col>
            </Row>
          );
        })
      ) : (
        <div />
      );
    return (
      <PageHeaderWrapper>
        <Anchor stargetOffset={50}>
          <Row style={{ textAlign: 'center' }}>
            <Col span={3}>
              <Link href="#sendInfor" title="派单信息" />
            </Col>
            <Col span={3}>
              <Link href="#basicma" title="基本信息" />
            </Col>
            <Col span={3}>
              <Link href="#socialInfor" title="社保公积金信息" />
            </Col>
            <Col span={3}>
              <Link href="#payInfor" title="收费信息" />
            </Col>
            <Col span={3}>
              <Link href="#personMkupPay" title="个人补缴" />
            </Col>
            <Col span={3}>
              <Link href="#contactInfor" title="联系记录" />
            </Col>
            {matPkgVo && matPkgVo.coltFlag && String(matPkgVo.coltFlag) === '1' && (
              <Col span={3}>
                <Link href="#materialInfor" title="材料信息" />
              </Col>
            )}
            <Col span={3}>
              <Link href="#hdlRemark" title="办理备注" />
            </Col>
          </Row>
        </Anchor>
        <Spin tip="Loading..." spinning={loading}>
          <Form>
            <EntryInform {...this.props} updateInfo={this.updateInfo} />
            <SocialInform
              {...this.props}
              payDetailVisible={payDetailVisible}
              payDetail={this.payDetail}
            />
            <ChargeInform
              {...this.props}
              onMkupPayPlcy={this.onMkupPayPlcy}
              updateChare={this.updateChare}
            />
            <Card
              title={<span id="contactInfor">联系记录</span>}
              extra={<a onClick={this.addContact}>新增联系记录</a>}
            >
              {entryContRcrds.length ? <ContactPage contactList={entryContRcrds} /> : <Empty />}
            </Card>
            {matPkgVo && matPkgVo.coltFlag && String(matPkgVo.coltFlag) === '1' && (
              <Card title={<span id="materialInfor">材料信息</span>}>
                {renderElem(elementArr)}
                <Row>
                  <Col span={14} offset={1}>
                    <FormItem {...formItemLayout} label="材料是否完整:">
                      {getFieldDecorator('matFlag', {
                        rules: [
                          {
                            required: true,
                            message: '请选择材料是否完整',
                          },
                        ],
                        initialValue: `${matFullFlag}` || undefined,
                      })(
                        <RadioGroup onChange={this.matFlagOnChange}>
                          <Radio value="1">是</Radio>
                          <Radio value="2">否</Radio>
                        </RadioGroup>
                      )}
                    </FormItem>
                  </Col>
                </Row>
              </Card>
            )}
            <Card title={<span id="hdlRemark">办理备注</span>}>
              <FormItem label={<span> 备注</span>} style={{ margin: 0 }} {...formItemLayout1}>
                {getFieldDecorator('content', {
                  rules: [{ required: false }],
                })(<TextArea rows={4} />)}
              </FormItem>
              <div style={{ marginTop: 20 }}>
                <HdlRemark hdlRemark={ordHdlRemarks} />
              </div>
            </Card>
          </Form>
        </Spin>
        <Modal title="办理完成" visible={execVisable} onOk={this.execOk} onCancel={this.execCancel}>
          <Form>
            {careerMatInfor.pdArrList && !!careerMatInfor.pdArrList.socialArr.length && (
              <Form.Item label="提交到社保" {...formItemLayout2}>
                {getFieldDecorator('pdArrSocial', {})(
                  <Checkbox.Group style={{ width: '100%' }}>
                    <Row>{hdlCompleteDom()}</Row>
                  </Checkbox.Group>
                )}
              </Form.Item>
            )}
            {careerMatInfor.pdArrList && !!careerMatInfor.pdArrList.accuArr.length && (
              <Form.Item label="提交到公积金" {...formItemLayout2}>
                {getFieldDecorator('pdArrAccu', {})(
                  <Checkbox.Group style={{ width: '100%' }}>
                    <Row>
                      {careerMatInfor.pdArrList.accuArr && careerMatInfor.pdArrList.accuArr.length
                        ? careerMatInfor.pdArrList.accuArr.map(item => hdlCompleteChild(item))
                        : null}
                    </Row>
                  </Checkbox.Group>
                )}
              </Form.Item>
            )}
          </Form>
        </Modal>
        <Modal
          title="添加险种"
          visible={mkupPayVisible}
          onOk={this.mkupPayOk}
          onCancel={this.mkupPayCancel}
        >
          <Form>
            <Form.Item label="选择需要的险种">
              {getFieldDecorator('mkupAss', {})(
                <Checkbox.Group style={{ width: '100%' }}>
                  <Row>
                    {chargeDto.pdChargeDtos &&
                      chargeDto.pdChargeDtos.length &&
                      chargeDto.pdChargeDtos.map(item => {
                        if (item.ass) {
                          return (
                            <Col span={8} key={item.ass}>
                              <Checkbox value={item.ass}>{item.pdName}</Checkbox>
                            </Col>
                          );
                        }
                        return true;
                      })}
                  </Row>
                </Checkbox.Group>
              )}
            </Form.Item>
          </Form>
        </Modal>
        <ContactPhone
          empTel={careerMatInfor.basicDto.empName}
          conTel={careerMatInfor.basicDto.mobile}
          conatctVisible={conatctVisible}
          submitData={this.submitData}
          contactFlag={contactFlag}
          expandConsult={expandConsult}
          handleModalVisible={this.handleModalVisible}
          contactData={this.contactData}
          addConsultData={this.addConsultData}
          contactPhoneLoading={contactPhoneLoading}
        />
        <UpdateBase
          baseVisible={baseVisible}
          basicDto={careerMatInfor.basicDto}
          submitBaseData={this.submitBaseData}
          handleModalBaseVisible={this.handleModalBaseVisible}
        />
        <UpdateChare
          chareVisible={chareVisible}
          pdChargeData={pdChargeData}
          insMergFlag={careerMatInfor.chargeDto.insMergFlag}
          mkupPayDets={careerMatInfor.mkupPayDets}
          submitChareData={this.submitChareData}
          onDataChange={this.onDataChange}
          handleModalChareVisible={this.handleModalChareVisible}
          subLoading={subLoading}
        />
        <FooterToolbar
          extra={
            <Button style={{ marginLeft: 15 }} onClick={this.markProb}>
              标记问题人员
            </Button>
          }
        >
          <Button style={{ marginLeft: 15 }} onClick={this.close}>
            取消
          </Button>
          <Button
            type="primary"
            onClick={() => this.insert('insert')}
            disabled={btnDis}
            loading={saveLoading}
          >
            保存
          </Button>
          {Number(execState) === 1 && (
            <Button
              type="primary"
              style={{ marginLeft: 15 }}
              onClick={() => this.insert('update')}
              disabled={btnDis}
            >
              办理完成
            </Button>
          )}
        </FooterToolbar>
        {proVisible && (
          <ProModal
            selectedRows={currentSelectedRows}
            selectedRowKeys={currentSelectedRowKeys}
            busiType="1"
            onOk={this.proHandleOk}
            onCancel={() => this.toggleProModal(false)}
            isProObj
            isProType
          />
        )}
      </PageHeaderWrapper>
    );
  }
}

export default DetailInfor;
